<template>
	<div class="app-container">
		<div v-if="user">
			<el-row :gutter="20">
				<el-col :span="6" :xs="24">
					<user-card :user="user" />
				</el-col>

				<el-col :span="18" :xs="24">
					<el-card>
						<el-tabs v-model="activeTab">
							<el-tab-pane label="Account" name="account">
								<account :user="user" />
							</el-tab-pane>
							<el-tab-pane label="Activity" name="activity">
								<activity />
							</el-tab-pane>
							<el-tab-pane label="Timeline" name="timeline">
								<timeline />
							</el-tab-pane>
						</el-tabs>
					</el-card>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import UserCard from './components/UserCard';
	import Activity from './components/Activity';
	import Timeline from './components/Timeline';
	import Account from './components/Account';
	import { ObjectUtil } from '@/utils/ObjectUtil';

	export default {
		name: 'Profile',
		components: { UserCard, Activity, Timeline, Account },
		data() {
			return {
				activeTab: 'account'
			};
		},
		computed: {
			user: function() {
				return ObjectUtil.clone(this.$store.getters.info);
			}
		},
		methods: {}
	};
</script>
